import React, {useState, useRef, useEffect} from "react";
import {Button, Input, List, Tooltip} from "antd";
import Avatar from "antd/es/avatar/avatar";
import {CloseOutlined, DeleteOutlined, FormOutlined,SaveOutlined} from "@ant-design/icons";
import PropTypes from "prop-types";
import "./FileList.less"

// file list components
const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
    const [editStatus,setEditStatus]=useState(false)
    const [value,setValue]=useState('')
    let inputRef=useRef(null)
    useEffect(()=>{
        if(editStatus){
            inputRef.current.focus()
        }
    },[editStatus])
    return (
        <List
            size="small"
            itemLayout="horizontal"
            dataSource={files}
            renderItem={item => {
                if(item.id !== editStatus){
                    return  <List.Item>
                        <List.Item.Meta
                            avatar={<Avatar src="https://joeschmoe.io/api/v1/random"/>}
                            title={item.title}
                            // description="Ant Design, "
                            onClick={() => {
                                onFileClick(item.id)
                            }}
                        />
                        <div className='file-list-icon'>
                            <Tooltip title="Form">
                                <Button type="primary" shape="circle" icon={<FormOutlined/>} onClick={() => {
                                    setEditStatus(item.id);
                                    setValue(item.title);

                                }}/>
                            </Tooltip>
                            <Tooltip title="Delete">
                                <Button type="primary" shape="circle" icon={<DeleteOutlined/>} onClick={() => {
                                    onFileDelete(item.id)
                                }}/>
                            </Tooltip>
                        </div>
                    </List.Item>
                }
                else{
                    return  <List.Item>
                        <Input placeholder="Basic usage" size="small"
                               className="input_div" defaultValue={value}
                               ref={inputRef}
                        />
                        <div className='file-list-icon'>
                            <Tooltip title="Save">
                                <Button type="primary" shape="circle" icon={<SaveOutlined />} onClick={() => {
                                    setEditStatus(item.id);
                                    setValue(item.title)
                                }}/>
                            </Tooltip>
                            <Tooltip title="Close">
                                <Button type="primary" shape="circle" icon={<CloseOutlined />} onClick={() => {
                                    setEditStatus(false)
                                }}/>
                            </Tooltip>
                        </div>
                    </List.Item>
                }

            }
            }
        />
    )
}
FileList.prototype={
    files:PropTypes.array,
    onFileClick:PropTypes.func,
    onSaveEdit:PropTypes.func
}
export default FileList